<template>
	<view class="container">

		<page-nav class="custom-title" title="登录" :leftShow="true"> </page-nav>

		<view class="content">
			<view class="top">

				<image src="https://www.xrskfw.com/favicon.png" class="logo" mode="widthFix" style=" width: 150rpx;">
					<view style="text-align: center; font-weight: bold;">欢迎使用星瑞数科</view>
				</image>

				<view style="display: flex; justify-content: space-around; width: 78%; margin: 0  auto; margin-top: 60rpx; 
				margin-bottom: 60rpx;">
					<view class="tabitem" :class="{activetabitem:index===curidx}" v-for="(item,index) in menulist"
						@click="seltab(index)">
						<view class="mytext">{{item}}</view>
					</view>
				</view>

				<view v-if="curidx===0">
					<view class="cell">

						<view class="input-box">

							<input type="text" v-model="username" placeholder="请输入手机号" class="ipt"
								placeholder-class="hold" @blur="handleInputCheck" />
						</view>
					</view>
					<view class="cell">

						<view class="input-box">
							<input type="password" v-model="password" placeholder="请输入密码" class="ipt"
								placeholder-class="hold" @blur="handleInputCheck" />
						</view>
					</view>

					<button class="submit" @click="submit" :disabled="disabled">登录</button>
					<view class="tipforget">忘记密码？</view>
				</view>

				<view v-if="curidx===1">
					<view class="cell">
						<view class="input-box">
							<input type="text" v-model="username" placeholder="请输入手机号" class="ipt"
								placeholder-class="hold" @blur="handleInputCheck" />
						</view>
					</view>
					<view class="cell">
						<view class="input-box">
							<input type="text" v-model="yzmcode" placeholder="请输入验证码" class="ipt"
								placeholder-class="hold" @blur="handleInputCheck" />
							<view style="font-size: 30rpx;color: #5f88ff;  padding-right:30rpx;" @click="getCode">
								{{strCode}}</view>

						</view>

					</view>

					<view class="cell">
						<view class="input-box">
							<input type="password" v-model="password" placeholder="设置密码" class="ipt"
								placeholder-class="hold" @blur="handleInputCheck" />
						</view>
					</view>
					<view class="cell">
						<view class="input-box">
							<input type="password" v-model="repassword" placeholder="确认密码" class="ipt"
								placeholder-class="hold" @blur="handleInputCheck" />
						</view>
					</view>

					<button class="submit" @click="regsubmit" :disabled="disabled">注册</button>

				</view>

			</view>

			<!-- 社交账号登录 -->
			<view class="bottom">
				<view class="tip">登录即代表已同意
					<navigator url="/pages/login/xiyipage" hover-class="none" class="tipinner">《用户服务协议》</navigator>
					与 <navigator  url="/pages/login/yingsipage"  hover-class="none" class="tipinner">《隐私政策》</navigator>
				</view>
			</view>
		</view>
		<!--  -->
	</view>
</template>

<script>
	import md5 from '@/utils/md5.js'
	export default {
		onLoad(option) {
			const {
				redirect
			} = option
			if (redirect) this.redirect = redirect

			let keyword = "";
			// 自动挂载至this.$u.api,无需引入
			// captcha 在 /api/demo.js 内定义
			this.$u.api.captcha().then(data => {

				this.codeurl = data.image;

			}).catch(() => {

			})
		},
		data() {
			return {
				tenantId: '000000',
				username: '',
				password: '',
				repassword: '',
				disabled: false,
				redirect: '',
				codeurl: '',
				yzmcode: '',
				curidx: 0,
				menulist: ["登录", "注册"],
				strCode: '获取验证码',
				iCount: 30,
				isLock: false,
				intervalId: null,
			}
		},
		methods: {
			submit() {
				this.$u.api
					.token(this.tenantId, this.username, md5(this.password))
					.then(data => {
						console.log("data", data)
						this.$u.func.login(data, this.redirect)
					})
					.catch(err => {
						console.log(err)
						this.$u.func.showToast({
							title: '用户名或密码错误'
						})
					})
			},
			handleInputCheck() {
				this.disabled = false
			},
			seltab(idx) {
				this.curidx = idx;
			},
			isValidPhoneNumber(phoneNumber) {
				return /^1[3-9]\d{9}$/.test(phoneNumber);
			},
			getCode() {


				if (this.isLock) {
					return;
				}

				if (!this.isValidPhoneNumber(this.username)) {
					this.$u.func.showToast({
						title: '请输入正确的手机号'
					})
					return;
				}

				this.isLock = true;

				const params = {
					phone:this.username,
					type:'register'
				}
				this.$u.api.sendCode(params).then((res)=>{
					console.log(res)
				})

				// https://www.xrskfw.com/api/xrsk-server/login/sendCode?phone=13235918216&type=register

				this.iCount = 30;

				this.intervalId = setInterval(() => {
					this.strCode = this.iCount-- + "秒后重新获取";
					if (this.iCount === 0) {
						this.iCount = 30
						this.strCode = "获取验证码";
						this.isLock = false;
						clearInterval(this.intervalId);
					}
				}, 1000);
			},
			regsubmit() {


				if (!this.isValidPhoneNumber(this.username)) {
					this.$u.func.showToast({
						title: '请输入正确的手机号'
					})
					return;
				}
				if (this.strCode === "") {
					this.$u.func.showToast({
						title: '验证码不能为空'
					})
					return;
				}
				if (this.repassword != this.password || this.repassword==='' || this.password ==='' ) {
					this.$u.func.showToast({
						title: '两次密码输入不一致'
					})
					return;
				}
				const params = {
					pwd :  md5(this.password),
					sms_code :this.yzmcode,
					userPhone : this.username
				}
				
				this.$u.api.register('000000', params).then((res)=>{
					console.log(res)
					this.$u.func.showToast({
						title: res.msg
					})
					if(res.code === 200){
						this.curidx =0;
					}
				})			
									
			}

		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		overflow: hidden;
		position: relative;
		background: url("https://www.xrskfw.com/static/images/user/line_dlzc.png") no-repeat center top;
		background-size: 100% 100%;

		background-size: 100%;

		.set-icon {
			vertical-align: middle;
			width: 41rpx;
			height: auto;
			margin-right: 35rpx;
		}

		.header {
			display: flex;
			align-items: center;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		height: 90vh;
		width: 100%;

		.top {
			width: 100%;
		}

		.logo {
			display: block;
			width: 281rpx;
			height: auto;
			margin: 0 auto 50rpx;
		}

		.cell {
			width: 100%;
			padding: 0 85rpx;
			box-sizing: border-box;
			margin-top: 36rpx;

			.name {
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3e4a59;
				line-height: 30rpx;
				opacity: 0.72;
			}

			.input-box {
				//padding: 30rpx 0;
				height: 90rpx;
				border: 1rpx solid #dddddd;
				border-radius: 45rpx;
				padding-left: 30rpx;
				// border-bottom: 2rpx solid #f6f6f6;
				display: flex;
				align-items: center;

				.code {
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #0d0d0d;
					line-height: 30rpx;

					text {
						// color: #14b9c8;
						color: #5f88ff;
					}
				}

				.ipt {
					flex: 1;
					// height: 24rpx;
					font-size: 24rpx;
				}

				.hold {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #3e4a59;
					line-height: 30px;
					opacity: 0.45;
				}
			}
		}

		.agree {
			margin: 27rpx 95rpx 0;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #cacaca;
			line-height: 34rpx;

			.a {
				color: #000000;
			}
		}

		.tipforget {
			width: 78%;
			display: flex;
			margin: 0 auto;
			padding-left: 20rpx;
			margin-top: 20rpx;
			color: #2E69FF;
			font-size: 26rpx;
		}

		.submit {
			// margin: 60rpx 90rpx 0;
			margin-top: 60rpx;
			border: none;
			width: 78%;
			height: 90rpx;
			line-height: 86rpx;
			box-sizing: border-box;
			border-radius: 40rpx;
			background-color: #2E69FF;
			color: #ffffff;

			&::after {
				content: none;
			}

			&::before {
				content: none;
			}

			&[disabled='true'] {
				background: #e4e4e4;
				font-size: 36rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #ffffff;
			}
		}

		.tip {
			display: flex;
			margin-top: 30rpx;
			text-align: center;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #cacaca;
			line-height: 34rpx;
		}

		.tipinner {
			display: flex;
			text-align: center;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #5f88ff;
			line-height: 34rpx;
		}

		.change {
			margin-top: 20rpx;
			text-align: center;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			// color: #14b9c8;
			color: #5f88ff;
			line-height: 34rpx;
		}

		.tag {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 22rpx;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #9f9f9f;
			line-height: 34rpx;

			&::before {
				content: '';
				display: block;
				width: 160rpx;
				height: 1px;
				background: #d8d8d8;
				opacity: 0.86;
			}

			&::after {
				content: '';
				display: block;
				width: 160rpx;
				height: 1px;
				background: #d8d8d8;
				opacity: 0.86;
			}
		}

		.chat-arr {
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon {
				width: 73rpx;
				height: 73rpx;
			}
		}

		.tabitem {
			position: relative;
			background-size: 100rpx 20rpx;
		}

		.activetabitem {
			position: relative;
			background: url("/static/images/user/line_dlzc.png") no-repeat center bottom;
			background-size: 100% 20rpx;
		}
	}
</style>